import React from 'react';
import moment from "moment";
import Admin from "../../../layout/Admin";
import UserModel from "../../../model/user";
import {PageHeader, Popconfirm, Table} from "antd";
import {defaultAvatarSrc} from "../../../component/CusomHeader/CusomHeader";
import UserDetailModal from "../components/user-detail-modal";
import Tags from "../user-list/tags";
import UserTagModal from "../components/user-tag-modal";
import AddVipModal from "../components/add-vip-modal";
import AddCouponModal from "../components/add-coupon-modal";
import UserActivityModal from "../components/user-activity-modal";
import UserBehaviorModal from "../components/user-behavior-modal";

class VipLoginList extends React.Component {
    constructor(props) {
        super(props)
        this.model = new UserModel()
        this.timeFormatString = 'YYYY-MM-DD HH:mm:ss'
        this.state = {
            list: [],
            user: null,
            modal: {
                user: false,
                tag: false,
                addVip: false,
                addCoupon: false,
                activity: false,
                behavior: false,
            },
        }
        this.columns = [
            {
                title: '纳米ID',
                dataIndex: 'Id',
                render: (_, record) => {
                    {
                        const detail = record
                        const {
                            Nickname,
                            Iconurl,
                            Username,
                        } = detail
                        return <div style={{display: 'flex',}}>
                            <img alt='' src={Iconurl ? Iconurl : defaultAvatarSrc} style={{height: 40, width: 40, marginRight: '8px',}}/>
                            <div>
                                <span style={{display: 'block'}}>昵称: {Nickname}</span>
                                <span style={{display: 'block'}}>账号: {Username}</span>
                            </div>
                        </div>
                    }
                }
            },
            {
                title: '会员',
                dataIndex: 'Vip',
                render: (text) => <div>
                    {text}天
                </div>,
            },

            {
                title: '用户等级',
                dataIndex: 'Viplevel',
            },

            {
                title: '注册时间',
                dataIndex: 'Createt',
            },

            {
                title: 'IP地址',
                dataIndex: 'IP',
            },


            {
                title: '操作',
                dataIndex: '操作',
                render: (_, record,) => {
                    return <div>
                        <div>
                            <a
                                style={{marginRight: 8,}}
                                onClick={() => this.callUserModal(record)}
                            >
                                <span>查看</span>
                            </a>

                            <a
                                style={{marginRight: 8,}}
                                onClick={() => this.callAddTagModal(record)}
                            >
                                <span>加标签</span>
                            </a>

                            <a
                                onClick={() => this.callAddVipModal(record)}
                                style={{marginRight: 8,}}
                            >
                                <span>加VIP</span>
                            </a>
                        </div>

                        <div>
                            {/*<Popconfirm*/}
                            {/*    title='确定删除用户?'*/}
                            {/*    onConfirm={() => this.deleteUser(record)}*/}
                            {/*>*/}
                            {/*    <a*/}
                            {/*        style={{marginRight: 8,}}*/}
                            {/*    >*/}
                            {/*        <span>删除用户</span>*/}
                            {/*    </a>*/}
                            {/*</Popconfirm>*/}


                            <a
                                onClick={() => this.callAddCouponModal(record)}
                                style={{marginRight: 8,}}
                            >
                                <span>加优惠卷</span>
                            </a>

                            <a
                                onClick={() => this.callActivityModal(record)}
                                style={{marginRight: 8,}}
                            >
                                <span>活跃度</span>
                            </a>

                            <a
                                onClick={() => this.callBehaviorModal(record)}
                            >
                                <span>用户行为</span>
                            </a>
                        </div>

                    </div>
                },
            },
        ]
    }

    componentDidMount() {
        this.get()
    }

    get() {
        let f = this.timeFormatString
        this.model
            .getLoginVip({
                // 2006-01-02 15:04:05
                Start: moment().set({hour:0,minute:0,second:0,millisecond:0}).format(f),
                End: moment().format(f),
            })
            .then(resp => {
                const list = resp.data.ok
                if (list) {
                    this.setState({
                        list,
                    })
                }
            })
    }

    modalShow = (key) => {

        this.setState({
            modal: {
                ...this.state.modal,
                [key]: true
            },
        })

    }

    modalCancel = (key) => {

        this.setState({
            modal: {
                ...this.state.modal,
                [key]: false
            },
        })
        if (key === 'tag') {
            this.setState({
                newUserTags: [],
            })
        }

    }

    callUserModal = user => {
        const m = user.Mark
        this.setState({
            user,
            newUserTags: this.markToTags(m),
            // newUserTags: this.markToTags(m),
        }, () => {
            this.modalShow('user')
        })
    }

    callAddTagModal = user => {

        const m = user.Mark
        this.setState({
            user,
        }, () => {
            this.modalShow('tag')
        })

    }

    callAddVipModal = user => {

        this.setState({
            user,
            // newUserTags: this.markToTags(m),
        }, () => {
            this.modalShow('addVip')
        })

    }

    callAddCouponModal = user => {
        this.setState({
            user,
            // newUserTags: this.markToTags(m),
        }, () => {
            this.modalShow('addCoupon')
        })
    }

    callActivityModal = user => {
        this.setState({
            user,
        }, () => {
            this.modalShow('activity')
        })
    }

    callBehaviorModal = user => {
        this.setState({
            user,
        }, () => {
            this.modalShow('behavior')
        })
    }

    markToTags = (mark) => {

        const m = mark
        const b = m.toString(2)
        const l = Tags.length
        let markString = ''
        if (l > b.length) {
            markString += '0'.repeat(l - b.length)
            markString += b
        } else {
            markString = b
        }

        // const mark = user.U.Mark.toString(2).split().reverse().join()
        const arr = []
        markString = markString.split('').reverse().join('')
        for (let i = 0; i < markString.length; i++) {
            let char = markString[i]
            if (Number(char) === 1) {
                let key = i
                let value = i
                let label = Tags[i]
                arr.push({key, value, label,})
            }
        }
        return arr

    }

    tagsToMark = (tags) => {

        let mark = 0
        for (let i = 0; i < tags.length; i++) {
            let value = tags[i].value
            mark += 1 << value
        }
        return mark

    }

    onUserDetailModalCancel = () => {
        this.modalCancel('user')
        this.setState({
            user: {},
        })
    }

    render() {
        const header = <div style={{background: '#fff'}}>
            <PageHeader title='登入会员列表'/>
        </div>
        return <>
            <UserDetailModal
                user={this.state.user}
                visible={this.state.modal.user}
                onCancel={() => this.onUserDetailModalCancel()}
                setUserDetail={(user) => {
                    this.setState({user,})
                }}
                fetchAll={() => this.get()}
            />
            <UserTagModal
                user={this.state.user}
                visible={this.state.modal.tag}
                onCancel={() => this.modalCancel('tag')}
                fetchAll={() => this.get()}
            />
            <AddVipModal
                user={this.state.user}
                visible={this.state.modal.addVip}
                onCancel={() => this.modalCancel('addVip')}
                fetchAll={() => this.get()}
            />
            <AddCouponModal
                user={this.state.user}
                visible={this.state.modal.addCoupon}
                onCancel={() => this.modalCancel('addCoupon')}
                fetchAll={() => this.get()}
            />
            <UserActivityModal
                user={this.state.user}
                visible={this.state.modal.activity}
                onCancel={() => this.modalCancel('activity')}
            />
            <UserBehaviorModal
                user={this.state.user}
                visible={this.state.modal.behavior}
                onCancel={() => this.modalCancel('behavior')}
            />
            <Admin>
                {header}
                <Table
                    dataSource={this.state.list}
                    columns={this.columns}
                    rowKey={(record, index) => index}
                />
            </Admin>
        </>
    }
}

export default VipLoginList